<template>
    <div class="IconChoose" :style="{ left: ShowStatus ? '0px' : '100%' }">
        <div class="Title" @click="emit('close')">
            <Left />
            <span>选择图标</span>
        </div>

        <div class="Tabs">
            <div class="TabItem" :class="{
                active: item.key == ActiveTab,
            }" v-for="item in Icons" :key="item.key" @click="ActiveTab = item.key">
                {{ item.title }}
            </div>
        </div>
        <div class="SearchList">
            <a-input name="IconFilterValue" v-model:value="SearchValue"></a-input>
        </div>
        <div class="IconBody">
            <template v-for="child in IconList">
                <div class="ChildTitle">{{ child.title }}</div>
                <div class="ChildGroup">
                    <RenderIcon :class="{
                        active: Value == childItem,
                    }" v-for="childItem in child.child" @click="ChooseIcon(childItem)" :type="childItem" />
                </div>
            </template>
        </div>
    </div>
</template>
<script setup>
import * as AllIcons from '@ant-design/icons-vue/lib/icons'
import { ref, shallowRef, h, computed } from 'vue';
import Icons from './iconData.js'

const IconMapping = {};
Icons.forEach(element => {
    IconMapping[element.key] = element
});

const Value = ref('');

const ActiveTab = ref('Outlined');
const Left = shallowRef(AllIcons.LeftOutlined);

const RenderIcon = function (props) {
    return h('div', { class: 'ChildIcon', title: props.type }, h(AllIcons[props.type]))
}
RenderIcon.props = ['type'];

const emit = defineEmits(['ChooseIcon', 'close']);

const SearchValue = ref('');
const IconList = computed(() => {
    const _list = IconMapping[ActiveTab.value].child;
    if (SearchValue.value) {
        const list = [];
        _list.forEach(item => {
            const _child = item.child.filter(item => item.toLocaleLowerCase().indexOf(SearchValue.value.toLocaleLowerCase()) != -1)
            if (_child.length != 0) {
                list.push({
                    title: item.title,
                    child: _child
                })
            }
        })
        return list
    } else {
        return _list;
    }
})


const ChooseIcon = function (icon) {
    Value.value = icon;
    emit('ChooseIcon', icon);
}

const ShowStatus = ref(false);



defineExpose({
    show() {
        setTimeout(() => {
            ShowStatus.value = true;
        }, 1)
    },
    hide() {
        ShowStatus.value = false
    },
    SetValue(value = '') {
        if (value.indexOf('Outlined') != -1) {
            ActiveTab.value = 'Outlined';
        } else if (value.indexOf('Filled') != -1) {
            ActiveTab.value = 'Filled';
        } else if (value.indexOf('TwoTone') != -1) {
            ActiveTab.value = 'TwoTone';
        };
        Value.value = value;
    }
})

</script>
<style lang="less" scoped>
.IconChoose {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fff;
    transition: left 0.2s;

    .Title {
        margin-top: 8px;
        background-color: #f0f0f0;
        cursor: pointer;

        span {
            margin-left: 8px;
            line-height: 32px;
        }
    }

    .Tabs {
        display: flex;
        border-bottom: 1px solid #f0f0f0;

        .TabItem {
            cursor: pointer;
            width: 100%;
            text-align: center;
            line-height: 32px;
            background-color: #fff;

            &.active {
                color: #1677ff;
            }
        }
    }
}

.SearchList {
    border-bottom: 1px solid #f0f0f0;
    padding: 8px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.IconBody {
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    top: 122px;
    bottom: 0;
    width: 100%;
}

.ChildTitle {
    font-size: 16px;
    padding: 12px 0 4px 8px;
}

.ChildGroup {
    display: flex;
    flex-wrap: wrap;

    .ChildIcon {
        width: 40px;
        height: 44px;
        margin: 10px;
        font-size: 24px;
        line-height: 40px;
        text-align: center;
        border: 1px solid transparent;
        cursor: pointer;
        border-radius: 4px;

        &:hover {
            background-color: #f0f0f0;
        }

        &.active {
            background-color: #1677ff;
            color: #fff;
        }
    }
}
</style>